<template>
    <!-- 首页 -->
    <h4>首页</h4>
    <div class="home">
        <!-- 轮播图 -->
        <div class="swiper">
            <el-carousel :interval="4000" type="card" height="220px" indicator-position="none">
                <el-carousel-item>
                    <img src="/public/h.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/public/q.png" alt="">
                </el-carousel-item>
                <el-carousel-item>
                    <img src="/public/w.png" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 栅格布局 -->
        <div class="layout">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <span class="title">公司介绍</span>
                        <p class="text">欢迎来到我们的公司：</p>
                        <p class="text">我们是一家xxxxx</p>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <span class="title">公司架构</span>
                        <p class="text">欢迎来到我们的公司：</p>
                        <p class="text">我们是一家xxxxx</p>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <span class="title">公司战略</span>
                        <p class="text">欢迎来到我们的公司：</p>
                        <p class="text">我们是一家xxxxx</p>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content ep-bg-purple">
                        <span class="title">高层介绍</span>
                        <p class="text">欢迎来到我们的公司：</p>
                        <p class="text">我们是一家xxxxx</p>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 表格 -->
        <div class="towtable">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple">
                        <h5 class="title">公司公告</h5>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="Date" width="180" />
                            <el-table-column prop="name" label="Name" width="180" />
                            <el-table-column prop="address" label="Address" />
                        </el-table>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple">
                        <h5 class="title">系统信息</h5>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="Date" width="180" />
                            <el-table-column prop="name" label="Name" width="180" />
                            <el-table-column prop="address" label="Address" />
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';

const tableData = ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
</script>
<style scoped lang="scss">
.home {
    .swiper {
        height: 220px;
    }

    .layout {
        margin-top: 10px;

        .grid-content {
            padding: 5px;
            background-color: aqua;
            height: 200px;

            .title {
                border-bottom: 1px solid skyblue;
            }

            .text {
                text-indent: 2em;
            }
        }

        .grid-content:hover {
            background-color: #f5f5f5;
        }
    }

    .towtable {
        margin-top: 10px;

        .grid-content {
            height: 200px;
            background-color: antiquewhite;
            .title {
                border-bottom:1px solid skyblue ;
            }
        }
    }
}
</style>